<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>CSVLayer - 4.6</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://js.arcgis.com/4.6/"></script>

    <script>
        require([
            "esri/Map",
            "esri/layers/CSVLayer",
            "esri/views/SceneView",
            "esri/config",
            "esri/core/urlUtils",
            "dojo/domReady!"
        ], function (
            Map,
            CSVLayer,
            SceneView,
            esriConfig,
            urlUtils
        ) {

                // If CSV files are not on the same domain as your website, a CORS enabled server
                // or a proxy is required.
                var url =
                    "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
                esriConfig.request.corsEnabledServers.push(url);

                // Paste the url into a browser's address bar to download and view the attributes
                // in the CSV file. These attributes include:
                // * mag - magnitude
                // * type - earthquake or other event such as nuclear test
                // * place - location of the event
                // * time - the time of the event

                var template = {
                    title: "Earthquake Info",
                    content: "Magnitude {mag} {type} hit {place} on {time}."
                };

                var csvLayer = new CSVLayer({
                    url: url,
                    copyright: "USGS Earthquakes",
                    popupTemplate: template,
                    elevationInfo: {
                        mode: "on-the-ground"
                    }
                });

                csvLayer.renderer = {
                    type: "simple",
                    symbol: {
                        type: "point-3d", // autocasts as new PointSymbol3D()
                        symbolLayers: [{
                            type: "icon", // autocasts as new IconSymbol3DLayer()
                            material: {
                                color: [238, 69, 0, 0.75]
                            },
                            outline: {
                                width: 0.5,
                                color: "white"
                            },
                            size: "12px"
                        }]
                    }
                };

                var map = new Map({
                    basemap: "gray",
                    layers: [csvLayer]
                });

                var view = new SceneView({
                    container: "viewDiv",
                    center: [138, 35],
                    zoom: 4,
                    map: map
                });

            });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>